<include file="Home/Public/Header" />
<link rel="stylesheet" type="text/css" href="__CSS__/global.css">
<link rel="stylesheet" type="text/css" href="__CSS__/global_new.css">
<link rel="stylesheet" type="text/css" href="__CSS__/Public.css">
<link rel="stylesheet" type="text/css" href="__CSS__/login.css">
<script type="text/javascript" src="__SCRIPT__/jquery.form.min.js"></script>
<style>
  label.error{display:block; color:red; top:41px; left:135px;position:absolute;}
  input.error{border:red 1px solid !important; outline: none;}
  .txyzzl li{position:relative;}
</style>
</head>
<body>
<include file="Home/Public/top_box" />
<include file="Home/Public/Search" />
<div class="clear"></div>
<!--中间内容-->
<div class="center">
  <div class="zhlc">
    <if condition="$step == 1">
      <div class="zhlc_xzs_2 zhlc_wz_1">1. 填写绑定手机号码 </div>
      <else />
      <div class="zhlc_xzs_1 zhlc_wz_1">1. 填写绑定手机号码 </div>
    </if>

    <if condition="$step == 2">
      <div class="zhlc_xzs_2 zhlc_wz_2">2. 短信验证</div>
      <else />
      <div class="zhlc_xzs_1 zhlc_wz_2">2. 短信验证</div>
    </if>

    <if condition="$step == 3">
      <div class="zhlc_xzs_2 zhlc_wz_3">3. 重置密码</div>
      <else />
      <div class="zhlc_xzs_1 zhlc_wz_3">3. 重置密码</div>
    </if>
  </div>
  <div class="txyzzl">
    <form id="registerForm" action="{:U('Home/Member/ForgetPassword')}" method="post">
    <switch name="step">
      <case value="1">
        <!-- 第一步 -->
        <ul>
          <li><span><strong style="color:#F90">*</strong> 绑定手机号:</span>
            <input name="tel" type="text" id="tel" size="30" maxlength="11">
          </li>
          <li> <span><strong style="color:#F90">*</strong> 验证码:</span>
            <input type="text" id="img_valid" name="code" size="12" maxlength="4">
            <img id="register_checkCodeImg" src="{:U('Home/Api/VerifyCode')}" style="display: inline;vertical-align: middle;width: 90px; height:45px;" onclick="this.src='/Home/Api/VerifyCode?' + new Date().getTime()+Math.random();" /> <a style=" cursor: pointer; vertical-align:middle;" onclick="document.getElementById('register_checkCodeImg').src='/Home/Api/VerifyCode?' + new Date().getTime()+Math.random();">换一张</a> </li>
          <li><span>&nbsp;</span>
            <input type="hidden" name="step" value="2" />
            <input type="submit" value="" class="xyb_button" style="height:51px;">
          </li>
        </ul>

        <script type="text/javascript">
          $(document).ready(function(){
            $("#registerForm").validate({
              rules: {
                tel: {
                  required: true,
                  number: true,
                  rangelength: [11, 11],
                  remote:{
                    type: 'POST',
                    url: "{:U('Home/Api/getMobile')}",
                    data: {
                      tel: function() {
                        return $("#tel").val();
                      }
                    }
                  }
                },
                code: {
                  required: true,
                  rangelength: [4, 4],
                  remote:{
                    type: 'POST',
                    url: "{:U('Home/Api/CheckVerifyCode')}",
                    data: {
                      img_valid: function() {
                        return $("#img_valid").val();
                      }
                    }
                  }
                }
              },

              messages: {
                tel: {
                  required: '请输入您注册时的手机号码',
                  number: '请输入正确的手机号码',
                  rangelength: '请输入正确的手机号码',
                  remote: '此手机号码不存在，请确认'
                },
                code: {
                  required: '请输入验证码',
                  rangelength: '验证码不正确',
                  remote: '验证码不正确'
                }
              }
            });
          });
        </script>

      </case>

      <case value="2">
        <!-- 第二步 -->
        <ul>
          <li style="line-height:10px;">&nbsp;</li>
          <li><span><strong style="color:#F90">*</strong> 请输入短信验证码:</span>
            <input name="smscode" type="text" id="smscode" size="30" maxlength="6">
          </li>
          <li><span>&nbsp;</span>
            <input type="hidden" name="tel" id="tel" value="{$tel}" />
            <input type="hidden" name="step" value="3" />
            <input type="submit" value="" class="xyb_button" style=" height:51px;" />
          </li>
        </ul>

        <script type="text/javascript">
          $(document).ready(function(){
            $("#registerForm").validate({
              rules: {
                smscode: {
                  required: true,
                  number: true,
                  rangelength: [6, 6],
                  remote:{
                    type: 'POST',
                    url: "{:U('Home/Api/SmsCodeVerify')}",
                    data: {
                      code: function() {
                        return $("#smscode").val();
                      },
                      tel: function(){
                        return $('#tel').val();
                      }
                    }
                  }
                }
              },

              messages: {
                smscode: {
                  required: '请输入您手机上收到的验证码',
                  number: '验证码输入不正确',
                  rangelength: '验证码输入不正确',
                  remote: '验证码输入不正确'
                }
              }
            });
          });
        </script>

      </case>

      <case value="3">
        <!-- 第三步 -->
        <ul>
          <li><span><strong style="color:#F90">*</strong> 请输入新密码:</span>
            <input name="password" type="password" id="password" size="20" maxlength="20">
          </li>
          <li><span><strong style="color:#F90">*</strong>再输一次:</span>
            <input name="password_confirm" type="password" id="password_confirm" size="20" maxlength="20">
          </li>

          <li><span>&nbsp;</span>
            <input type="hidden" name="step" value="4" />
            <input type="submit" value="" class="xyb_button" style=" height:51px;">
          </li>
        </ul>

        <script type="text/javascript">
          $(document).ready(function(){
            $.validator.addMethod("password", function(value) {
              var v = $.trim(value);
              var preg = /^(?![^a-zA-Z]+$)(?!\D+$).{6,20}$/;
              return preg.exec(value) ? true : false;
            }, "密码由6-20位字符组成，需同时包含字母和数字");

            $("#registerForm").validate({
              rules: {
                password: {
                  required: true,
                  password: true
                },
                password_confirm: {
                  required: true,
                  password: true,
                  equalTo: "#password"
                }
              },
              messages: {
                password: {
                  required: '请输入新密码',
                  password: '密码由6-20位字符组成，需同时包含字母和数字',
                },
                password_confirm: {
                  required: '请输入新密码',
                  password: '密码由6-20位字符组成，需同时包含字母和数字',
                  equalTo: '您两次输入的密码不一样，请重新输入'
                }
              }
            });
          });
        </script>

      </case>

    </switch>
    </form>
  </div>
</div>
<include file="Home/Public/footer" />
<notempty name="debug_info">
  <script type="text/javascript">alert('{$debug_info}')</script>
</notempty>
</body>
</html>